<template>
  <div class="search">
    <el-input placeholder="搜索或输入网址" v-model="key" class="input-with-select" @keydown.native.enter="nativeTo">
      <el-select v-model="select" slot="prepend">
        <el-option v-for="(item,index) in SearchEngines" :label="item.label ? item.label[0] : ''" :value="index" :key="item.url">
          {{ item.label }}
        </el-option>
      </el-select>
      <el-button slot="append" icon="el-icon-search" @click="nativeTo"></el-button>
    </el-input>
  </div>
</template>
<script>
import Cookies from 'js-cookie'
export default {
  inject:['config','SearchEngines'],
  data() {
    return {
      key: ""
    };
  },
  computed:{
    select:{
      get(){
        return this.config.label ? this.config.label[0] : ''
      },
      set( index ){
        Object.assign( this.config, this.SearchEngines[ index ] )
        Cookies.set( 'S', index, { expires: 700 } )
      }
    }
  },
  methods:{
    isSite( key ){
      return  /\./.test( key ) && !/ /.test( key )
    },
    nativeTo(){
      let key = this.key.trim()
      if( !key ) return console.log('Keywords are required')
      if( this.isSite( key ) ){
        let header = /^http/i.test( key ) ? '' : 'http://'
        window.location.href = header + key
        return
      }
      window.location.href = this.config.url + key
    }
  }
};
</script>
<style lang="scss" scoped>
$input-out-line: #666;
  .search{
    margin: 0 auto;
    width: 70%;
  }
  .search /deep/{
    .el-input-group__prepend{
      border-color: $input-out-line;
    }
    .el-input-group__append{
      border-color: $input-out-line;
    }
    .el-input__inner{
      border-color: $input-out-line;
    }
    .el-select {
      margin: -10px 0 -10px -20px;
      .el-input{
        padding-left: 5px;
        padding-right: 5px;
        .el-input__suffix{
          right: -14px;
        }
        input{
          padding: 0;
          padding-left: 5px;
        }
      }
    }
  }
</style>